<div class="intro">
    <p>This example shows how to create a basic `Dial` widget.</p>

    <p>Drag the handle, or click the ring, to set the value. When the handle has the focus, the following keys update its value: arrow keys, page up/down, home, and end.  The action of these keys can be controlled via <a href="index.html#attributes" title="YUI 3: Dial">Dial's configuration attributes</a>.</p>
</div>

<div class="example yui3-skin-sam">
    {{>dial-basic-source}}
</div>

<h3>Creating a Dial</h3>
<p>A `Dial` can be created easily and rendered into existing markup.</p>

<h4>The Markup</h4>
{{>need-skin-note}}
```
<body class="yui3-skin-sam"> {{>need-skin-comment}}
```
<p>The only markup requirement is an HTML element to contain the Dial.</p>

```
    {{>dial-basic-markup}}
```
<h4>The JavaScript</h4>
<p>`Dial` extends the `Widget` class, following the same pattern
as any widget constructor.  As a result, it accepts a configuration object to
set the initial configuration for the widget.</p>

<p>After creating and configuring the new `Dial`,
call the `render` method on the `Dial` object, passing it
the selector for a container element.
This renders it into the container and makes it usable.</p>

<p>Some commonly used configuration attributes are shown below. </p>
```
{{>dial-basic-script}}
```
<h3>Complete Example Source</h3>
```
{{>dial-basic-complete}}
```

